<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    li {
      background-color: deepskyblue;
    }
  </style>
  <body>
    <button>点击</button>
    <ul>
      <li>1</li>
      <li>2</li>
      <li><a href="#">一个a标签</a></li>
      <li>4</li>
      <li>5</li>
      <p>p</p>
    </ul>
    <b style="color: hotpink">123</b>
  </body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  //规律：jquery中 设置某个属性的时候 不是使用等号 一般是调用方法，传入参数进行设置
  //css方法
  // 隐式迭代
  // css(key,value)
  $("li").css("color", "red");
  //   css({...})
  $("li").css({ fontSize: "20px" });
  //   获取属性的时候需要传入key,能够获取行内和css设置的样式
  console.log($("li").css("background"));
  console.log($("b").css("color"));
  //   获取结构中 第二个li的其它兄弟元素
  console.log($("li:eq(1)").siblings());
  //   给第二个li 其他的所有兄弟元素的颜色设置为黑色
  //   $("li:eq(1)").siblings().css("color", "#000");
  $("li:eq(1)").siblings("li:eq(1)").find("a").css("border", "1px solid #000");
  //   console.log($("li:eq(1)").siblings("li:eq(1)"));
  //   给第三个li标签中的a标签设置了实现边框，其他的li要设置虚线边框

  $("li:eq(1)")
    .siblings("li:eq(1)")
    .find("a")
    .css("border", "1px solid #000")
    .parent()
    .siblings()
    .css("border", "2px dashed blue");

  console.log(
    $("li:eq(1)")
      .siblings("li:eq(1)")
      .find("a")
      .css("border", "1px solid #000")
      .end()
  );
</script>
